//主题切换
import cssVars from 'css-vars-ponyfill'
// 字体变量
const baseSize = {
  '--font-size-large-x': '22px',
  '--font-size-large': '18px',
  '--font-size-medium': '14px',
  '--font-size-medium-x': '16px',
  '--font-size-small-s': '10px',
  '--font-size-small': '12px'
}

//浅色
export const lightTheme = {
  '--fill-1': '#fff',
  '--text': '#3c3c3c',
  '--text-1': '#757575',
  '--text-2': 'red',
  ...baseSize
}

// 深色
export const darkTheme = {
  '--fill-1': '#222',
  '--text': '#fff',
  '--text-1': 'rgba(255, 255, 255, 0.3)',
  '--text-2': '#ffcd32',
  ...baseSize
}
export const initTheme = (theme) => {
  let mainTheme = ''
  switch (theme) {
    case 'dark':
      mainTheme = darkTheme
      break
    case 'light':
      mainTheme = lightTheme
      break
  }
  cssVars({
    watch: true, // 当添加，删除或修改其<link>或<style>元素的禁用或href属性时，ponyfill将自行调用
    variables: mainTheme, // variables 自定义属性名/值对的集合
    onlyLegacy: false // false  默认将css变量编译为浏览器识别的css样式  true 当浏览器不支持css变量的时候将css变量编译为识别的css
  })
}
